<template>
  <div class="t-dialog">
    <!--destroy-on-close 关闭弹框销毁元素-->
    <el-dialog v-elDragDialog :title="dialogTitle" :visible.sync="visible"
               :before-close="beforeHandleClose"
               destroy-on-close
               class="t-dialog-content"
               :close-on-press-escape="false"
               :close-on-click-modal="false">
      <template v-for="(index, name) in $slots" :slot="name">
        <slot :name="name" />
      </template>
      <span slot="footer" class="dialog-footer">
				<el-button @click="cancel">取 消</el-button>
				<el-button type="primary" @click="confirm">确 定</el-button>
			</span>
    </el-dialog>
  </div>
</template>
<script>
  export default {
    props: {
      dialogTitle: {
        type: String,
        default: '标题',
      },
      visible: {
        type: Boolean,
        default: false,
      },
    },
    created() {
      console.log("slots",this.$slots)
    },
    computed: {
      attrs() {
        return {
          // 'close-on-click-modal': true,  // 点击遮罩层不允许关闭
          // 'close-on-press-escape': false, // esc不允许关闭
          ...this.$attrs
        }
      }
    },
    methods: {
      // 取消按钮
      cancel() {
        this.$emit('cancel')
      },
      // 确认按钮
      confirm() {
        this.$emit('confirm')
      },
      // 关闭前的回调
      handleClose() {
        this.$emit('handleClose')
      },
      /*点击黑色区域 不关闭*/
      beforeHandleClose(){
     /*   this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});*/
        this.$emit('handleClose')
        return  false
      }
    },
  }
</script>
<style lang="scss">
  .t-dialog {
    .t-dialog-content {
      .el-dialog__header {
        border-bottom: 1px solid rgba(240, 242, 245, 1);
      }
      .el-dialog__body {
        overflow-x: auto;
        &::-webkit-scrollbar {
          margin-top: 110px;
          width: 8px;
          height: 1px;
        }
        &::-webkit-scrollbar-thumb {
          border-radius: 10px;
          -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
          background: #b3b3b3;
        }
        &::-webkit-scrollbar-track {
          -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
          border-radius: 5px;
          background: #ededed;
        }
      }
    }
  }
</style>

